<template>
   <div class="modal-bg" v-if="visible" @click.stop>
      <div class="modal">
        <div class="modal-con">
          <div class="modal-title">提示</div>
          <div class="modal-text">{{message}}</div>
        </div>
        <div class="modal-bottom">
          <div class="cancel" @click="cancel" v-if="showCancel">{{cancelText}}</div>
          <div class="confirm" @click="confirm" v-if="showComfirm">{{confirmText}}</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'showModal',
  components: {},
  data() {
    return {
      visible: false,
      message: '往后余生，风雪是你',
      showCancel: true,
      showComfirm: true,
      confirmText: '确定',
      cancelText: '取消'
    }
  },
  methods: {
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .modal-bg
    position fixed
    left 0
    top 0
    right 0
    bottom 0
    z-index 9999
    background rgba(0,0,0,0.6)
    text-align center
    .modal
      width 80%
      position absolute
      left 50%
      top 50%
      transform translate(-50%,-50%)
      z-index 9999
      background #fff
      text-align center
      border-radius 5px
      overflow hidden
      .modal-con
        padding 15px
        .modal-title
          font-size 18px
          color #000
          margin-top 5px
        .modal-text
          font-size 15px
          line-height 22px
          color #777
          margin-top 23px
      .modal-bottom
        width 100%
        line-height 46px
        display flex
        margin-top 10px
        position relative
        &::before
          content ''
          position: absolute
          height: 1px
          -webkit-transform: scale(1,.5)
          transform: scale(1,.5)
          -webkit-transform-origin: 0 bottom
          transform-origin: 0 bottom
          top: -1px
          left 0
          right 0
          border-top: 1px solid #bbb
        .confirm
          flex 1
          font-size 18px
          color #fff
          background $themeColor
        .cancel
          flex 1
          font-size 18px
          color #333
          position relative
          // &::before
          //   content ''
          //   position: absolute
          //   width: 1px
          //   -webkit-transform: scale(1,.5)
          //   transform: scale(1,.5)
          //   -webkit-transform-origin: 0 bottom
          //   transform-origin: 0 bottom
          //   top 0
          //   bottom 0
          //   right 0
          //   border-right: 1px solid #bbb
</style>